<template>
  <div class="box">
    <div class="header">
      <div><router-link to="/">首页</router-link></div>
    </div>
    <div class="content">
      <div>
        <div>发布文章</div>
        <div>
          <div>
            <span>标题：</span>
            <input type="text" v-model="nname" />
          </div>
          <div>
            <span>分类：</span>
            <select v-model="select">
              <option value="1">首页</option>
              <option value="2">各方反应</option>
              <option value="3">全球连线</option>
              <option value="4">高清大图</option>
            </select>
          </div>
        </div>
        <div>
          <div>
            <span>图片：</span>
            <el-upload
              class="upload-demo"
              drag
              action="http://120.78.224.75:6677/uploadimg"
              multiple
              limit="1"
              name="uploadFile"
              :on-success="imgsuccess"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>，仅限一张图片
              </div>
            </el-upload>
          </div>
          <div>
            <span>摘要：</span>
            <textarea cols="30" rows="10" v-model="disc"></textarea>
          </div>
        </div>
        <div>
          <span>内容：</span>
          <quill-editor
            ref="myTextEditor"
            v-model="textcontent"
            :options="editorOption"
            style="width: 800px; height: 200px"
          ></quill-editor>
        </div>
        <div>
          <span @click="sendArticle">发布文章</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nname: "",
      select: "",
      textcontent: "",
      ncover: "",
      disc: "",
      editorOption: {
        placeholder: "请输入文章内容",
      },
    };
  },
  methods: {
    imgsuccess(res, file) {
      this.ncover = res.urls[0];
    },
    sendArticle() {
      let { nname, select, textcontent, ncover, disc } = this;
      if (nname && select && textcontent && disc) {
        const url = "http://120.78.224.75:6677/uploadtext";
        let params = `nname=${nname}&&ntext=<div id="detail">${textcontent}</div>&&disc=${disc}&&cid=${select}&&ncover=${ncover}&&uid=${this.$store.state.uid}`;
        this.axios.post(url, params).then((res) => {
          if (res.data.code == 200) {
            this.$alert("文章发布成功", "发布文章提示", {
              confirmButtonText: "确定",
            });
            this.$router.push("/");
          } else {
            this.$alert("发布失败", "发布文章提示", {
              confirmButtonText: "确定",
            });
          }
        });
      } else {
        this.$alert("内容不能有空", "发布文章提示", {
          confirmButtonText: "确定",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  background-color: #90080e;
  height: 40px;
  > div:first-child {
    line-height: 40px;
    margin-left: 10px;
    cursor: pointer;
    > a {
      font-size: 16px;
      color: #fff;
    }
  }
}
.content {
  background: url("../assets/img/f1/bg2.png") no-repeat;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-attachment: fixed;
  min-height: 98vh;
  display: flex;
  align-items: center;
  justify-content: center;
  > div {
    width: 1160px;
    height: 680px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 35px;
    > div:first-child {
      font-size: 36px;
      color: #90080e;
      font-weight: bold;
      margin-bottom: 10px;
      margin-left: 40px;
    }

    > div:nth-child(2) {
      display: flex;
      > div:first-child {
        margin-bottom: 20px;
        margin-right: 10px;
        > span {
          display: inline-block;
          width: 60px;
          font-size: 18px;
          color: black;
        }
        > input {
          width: 350px;
          height: 35px;
          border: 1px solid #aaa;
        }
      }
      > div:last-child {
        margin-bottom: 20px;
        > span {
          display: inline-block;
          width: 60px;
          font-size: 18px;
          color: black;
        }
        > select {
          width: 356px;
          height: 39px;
          border: 1px solid #aaa;
        }
      }
    }
    > div:nth-child(3) {
      display: flex;
      margin-bottom: 20px;
      > div:first-child {
        margin-right: 10px;
        display: flex;
        > span {
          display: inline-block;
          width: 60px;
          font-size: 18px;
          color: black;
        }
      }
      > div:last-child {
        > span {
          display: inline-block;
          width: 60px;
          font-size: 18px;
          color: black;
        }
        > textarea {
          width: 350px;
          height: 170px;
          border: 1px solid #aaa;
        }
      }
    }
    > div:nth-child(4) {
      display: flex;
      > span {
        display: inline-block;
        width: 60px;
        font-size: 18px;
        color: black;
      }
    }
    > div:nth-child(5) {
      margin-top: 80px;
      > span {
        display: inline-block;
        width: 120px;
        height: 50px;
        color: white;
        background-color: #90080e;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        border-radius: 30px;
        cursor: pointer;
        user-select: none;
      }
    }
  }
}
</style>
